var t = require("../common/component"), a = require("../mixins/touch");

(0, t.VantComponent)({
    mixins: [ a.touch ],
    props: {
        disabled: Boolean,
        useButtonSlot: Boolean,
        activeColor: String,
        inactiveColor: String,
        maxValue: {
            type: Number,
            value: 100
        },
        minValue: {
            type: Number,
            value: 0
        },
        stepValue: {
            type: Number,
            value: 1
        },
        currentValue: {
            type: Number,
            value: 0
        },
        barHeight: {
            type: String,
            value: "2px"
        }
    },
    watch: {
        currentValue: function(newValue) {
            this.updateValue(newValue, !1);
        }
    },
    created: function() {
        this.updateValue(this.data.currentValue);
    },
    methods: {
        onTouchStart: function(event) {
            this.data.disabled || (this.touchStart(event), this.startValue = this.format(this.data.currentValue));
        },
        onTouchMove: function(event) {
            var component = this;
            this.data.disabled || (this.touchMove(event), this.getRect(".van-slider").then(function(rect) {
                var deltaXPercentage = component.deltaX / rect.width * 100;
                component.newValue = component.startValue + deltaXPercentage, component.updateValue(component.newValue, !1, !0);
            }));
        },
        onTouchEnd: function() {
            this.data.disabled || this.updateValue(this.newValue, !0);
        },
        onClick: function(event) {
            var component = this;
            this.data.disabled || this.getRect(".van-slider").then(function(rect) {
                var clickPercentage = (event.detail.x - rect.left) / rect.width * 100;
                component.updateValue(clickPercentage, !0);
            });
        },
        updateValue: function(value, emitChange, isDragging) {
            value = this.format(value), this.set({
                currentValue: value,
                barStyle: "width: " + value + "%; height: " + this.data.barHeight + ";"
            }), isDragging && this.$emit("drag", {
                value: value
            }), emitChange && this.$emit("change", value);
        },
        format: function(value) {
            var data = this.data, maxValue = data.maxValue, minValue = data.minValue, stepValue = data.stepValue;
            return Math.round(Math.max(minValue, Math.min(value, maxValue)) / stepValue) * stepValue;
        }
    }
});